﻿@page "/test4"

<PageTitle>Css Sticky Table</PageTitle>

<h4>Test4</h4>

<ul class="text-danger">
    <li>
        border 收缩时（border collapse）使用 box-shadow 绘制外阴影将没有效果。
    </li>
    <li>
        border 分离时（border separate）但 border spacing 为 0 时，box-shadow 绘制外阴影也没有效果。
    </li>
    <li>
        border 间距对使用 filter 绘制的阴影没有影响。
    </li>
</ul>
<p>
    <button @onclick="@ToggleCollapse">
        边框模式：@btnCollapseStr
    </button>
    <button @onclick="@ToggleSpacing">
        间距模式：@btnSpacingStr
    </button>
</p>
<div id="wrapper">
    <table class="table table-bordered" style="border-collapse: @collapseValue; border-spacing: @spacingValue;">
        <thead>
            <tr>
                <th>A</th>
                <th>B</th>
                <th>C</th>
                <th>D</th>
                <th>E</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
            <tr style="">
                <td>2</td>
                <td style="box-shadow: 4px 4px 4px red;">box-shadow</td>
                <td>2</td>
                <td>2</td>
                <td>2</td>
            </tr>
            <tr>
                <td>3</td>
                <td>3</td>
                <td>3</td>
                <td>3</td>
                <td>3</td>
            </tr>
            <tr>
                <td>4</td>
                <td style="filter: drop-shadow(2px 0 1px red);">filter</td>
                <td>4</td>
                <td>4</td>
                <td>4</td>
            </tr>
            <tr>
                <td>5</td>
                <td>5</td>
                <td>5</td>
                <td>5</td>
                <td>5</td>
            </tr>
            <tr>
                <td>6</td>
                <td>6</td>
                <td>6</td>
                <td>6</td>
                <td>6</td>
            </tr>
            <tr>
                <td>7</td>
                <td>7</td>
                <td>7</td>
                <td>7</td>
                <td>7</td>
            </tr>
            <tr>
                <td>8</td>
                <td>8</td>
                <td>8</td>
                <td>8</td>
                <td>8</td>
            </tr>
            <tr>
                <td>9</td>
                <td>9</td>
                <td>9</td>
                <td>9</td>
                <td>9</td>
            </tr>
            <tr>
                <td>10</td>
                <td>10</td>
                <td>10</td>
                <td>10</td>
                <td>10</td>
            </tr>
        </tbody>
    </table>
</div>

<style>

    #wrapper {
        width: 100%;
        height: 260px;
        overflow: auto;
    }

</style>


@code {
    
    private const string borderSeparateText = "分离";
    private const string borderCollapseText = "收缩";
    private const string spacingZeroText = "Spacing 0";
    private const string spacingOneText = "Spacing 1";

    private bool _isCollapsed = true;
    private bool _hasSpacing = false;

    private string btnCollapseStr => _isCollapsed ? borderCollapseText : borderSeparateText;
    private string collapseValue => _isCollapsed ? "collapse" : "separate";

    private string btnSpacingStr => _hasSpacing ? spacingOneText : spacingZeroText;
    private string spacingValue => _hasSpacing ? "1" : "0";

    protected override void OnInitialized()
    {
        
    }

    private void ToggleCollapse()
    {
        _isCollapsed = !_isCollapsed;
    }

    private void ToggleSpacing()
    {
        _hasSpacing = !_hasSpacing;
    }

}
